
<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue';
/*
1. 安装axios
2. 发送请求
    a. 建议不要使用axios发送,可以使用axios.request 发送，对ts支持更友好
    b. 千万不要在setup 里面写 await，如果变成了 async，那么返回的就是 promise，页面数据不对，出不来
3. 定义list数组，把返回的数据存进去，做列表渲染
4. 需要给list做类型描述，通过泛型把具体数据描述清楚，就有了代码保护
5. 定义当前选中的tab，绑定选中类名和切换当前选中
6. 对axios.request 返回的数据做类型描述，描述完后，就可以有足够的代码保护和提醒了
    类型描述： 看到有什么数据，一层一层写出来即可
*/

// 定义数组，记得复杂类型建议把类型描述清楚
interface ListItem {
    id: number,
    name: string
}
type List = ListItem[]

const list = ref<List>([])

const now = ref('')
// 正常
const getList = async () => {
    const res = await axios.request<{
        data: {
            channels: List
        },
        message: string
    }>({
        url: 'http://geek.itheima.net/v1_0/channels'
    })
    // console.log('res -----> ', res.data.data.channels);
    list.value = res.data.data.channels
    now.value = list.value[0].name
}
getList()

// 千万不要再顶层发送请求即可
// const res = await axios.request({
//     url: 'http://geek.itheima.net/v1_0/channels'
// })

</script>

<!-- 原理解释 -->
<!-- <script lang="ts">
export default {
    // 正常的话，setup应该返回的是一个普通对象
    // 如果变成了 async，那么返回的就是 promise，导致页面数据不对，出不来
    async setup() {
        const msg = '123'
        const res = await axios.request({
            url: 'http://geek.itheima.net/v1_0/channels'
        })
        return {msg}
    }
}
</script> -->
    
<template>
    <ul class="nav">
        <li :class="{active: now===item.name}" @click="now=item.name" v-for="item in list" :key="item.id">{{item.name}}
        </li>
    </ul>
</template>
    
<style>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.nav {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow: auto;
}

.nav li {
    padding: 10px;
    flex-shrink: 0;
}

.nav li.active {
    border-bottom: 3px solid #f30;
}
</style>